<template>
  <div class="thirdTab">
    <div class="first-tab">
      <div class="tablistbox">
        <a
          href="javascript:void(0);"
          :class="index == isactive ? 'active' : ''"
          @click="handelchange(index)"
          :key="index"
          v-for="(item, index) in tablist"
          >{{ item.name }}&nbsp;&nbsp;
          <el-tooltip placement="right">
            <div class="contentBox" slot="content">
              在敏捷项目管理模型中，团队以迭代（相等持续时间的时间盒）形式交付完整的功<br />
              能。团队集中于最重要的功能，作为一个团队合作完成其工作。然后，团队再集中<br />
              于下一项最重要的功能，并合作完成其工作。团队可决定一次进行若干功能的开发<br />
              工作，但团队不会同时完成所有的迭代工作（即团队不会在完成全部分析等工作后<br />
              再解决所有需求）。
            </div>
            <span class="introductionBox">？</span>
          </el-tooltip></a
        >
      </div>
      <survey :is="currentView" keep-alive></survey>
    </div>
  </div>
</template>

<script>
import survey from './newBuildProject/agsurvey.vue';
export default {
  name: 'thirdTab',
  data() {
    return {
      isactive: 0,
      tablist: [
        { name: '项目概况' }

      ],
      currentView: 'survey'
    };
  },
  components: {
    survey
  },
  methods: {
    handelchange(index) {
      this.isactive = index;
      if (index === 0) {
        this.currentView = 'survey';
      } else if (index === 1) {
        this.currentView = 'introduce';
      } else if (index === 2) {
        this.currentView = 'tasklist';
      } else if (index === 3) {
        this.currentView = 'calendar';
      } else if (index === 4) {
        this.currentView = 'teaching';
      }
    }
  }
};
</script>

<style lang="less" scoped>
.first-tab {
  a {
    color: #555;
    width: 140px;
    height: 55px;
    border: 1px solid #ececec;
    line-height: 55px;
    font-size: 14px;
    text-align: center;
    background: #ffffff;
    border: 1px solid #ececec;
    display: inline-block;
    box-shadow: 0px 0px 1px 0px #99999980;
  }
  .active {
    position: relative;
    width: 140px;
    height: 65px;
    line-height: 70px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px 8px 0px 0px;
    border-bottom: none;
    box-shadow: 1px -2px 3px 0px #99999980;
    z-index: 3;
  }
}
</style>
